<template>
  <div class="k-btn-wrap k-letters">
    <ul class="fl num-ul">
      <li
        v-for="(row, idx) in cp_ordinary"
        :key="idx"
        class="clear-fix k-row"
        :class="{['k-row-' + cp_ordinary.length]: 1}"
      >
        <template v-for="(btn, i) in row">
          <span
            v-if="btn.expect === 'languageSwitch'"
            :key="i"
            class="fl k-btn switch"
            :class="['k-' + btn.type, 'k-btn-' + row.length, {active: active === `${idx}_${i}`}]"
            @touchstart.stop="active = `${idx}_${i}`"
            @touchend.stop="btnClick($event, btn)"
            @mousedown.stop="!mobile && (active = `${idx}_${i}`)"
            @mouseup.stop="btnClick($event, btn)"
          >
            <span class="sw-item">
              <span class="fl">{{ btn.view[boardModel].split('/')[0] + '/' }}</span>
              <span class="sw-text fl">{{ btn.view[boardModel].split('/')[1] }}</span>
            </span>
          </span>
          <span
            v-else-if="btn.expect === 'delete'"
            :key="i"
            class="fl k-btn"
            :class="['k-' + btn.type, 'k-btn-' + row.length, {active: active === `${idx}_${i}`}]"
            @touchstart.stop="deleteClick($event, btn, `${idx}_${i}`)"
            @touchend.stop="deleteEnd"
            @mousedown.stop="deleteClick($event, btn, `${idx}_${i}`)"
            @mouseup.stop="deleteEnd"
          >
          <span class="k-btn-bg"></span>
          </span>
          <span
            v-else-if="btn.expect === 'caseSwitch'"
            :key="i"
            class="fl k-btn caseswitch"
            :class="['k-' + btn.type, 'k-btn-' + row.length, {active: active === `${idx}_${i}`, switchcase: isUpper}]"
            @touchstart.stop="active = `${idx}_${i}`"
            @touchend.stop="btnClick($event, btn)"
            @mousedown.stop="!mobile && (active = `${idx}_${i}`)"
            @mouseup.stop="btnClick($event, btn)"
          >{{ btn.view || ((isUpper && btn.type === 'default') && btn.text.toUpperCase() || btn.text) }}</span>
          <span
            v-else
            :key="i"
            class="fl k-btn spell"
            :class="['k-' + btn.type, 'k-btn-' + row.length, {active: active === `${idx}_${i}`, disable: disableBtn.indexOf(btn.expect) > -1}]"
            @touchstart.stop="active = `${idx}_${i}`"
            @touchend.stop="btnClick($event, btn)"
            @mousedown.stop="!mobile && (active = `${idx}_${i}`)"
            @mouseup.stop="btnClick($event, btn)"
          >{{ btn.view || ((isUpper && btn.type === 'default') && btn.text.toUpperCase() || btn.text) }}</span>
        </template>
      </li>
    </ul>
  </div>
</template>

<script>
import { KeepPress } from './index';
import { _implant, browerEnv } from './utils';
export default {
    name: 'ThePublic',
    props: {
        boardData: {
            type: Object,
            required: true,
        },
        boardModel: {
            type: String,
            default: '',
        },
        boardType: {
            type: String,
            default: '',
        },
        disableBtn: {
            type: Array,
            default: () => {
                return [];
            },
        },
    },
    data () {
        let press = new KeepPress();
        return {
            isUpper: false, // 是否大写
            model: 'text',
            pressDown: press.down(($event, data) => {
                if (!data.expect === 'delete') {
                    this.active = '';
                }
                this.$emit('keep-press', $event, data);
            }, 1000),
            pressUp: press.up(e => {}),
            pressClick: press.click(($event, data) => {
                this.active = '';
                this.$emit('btn-click', $event, data);
            }),
            active: '',
            time: null,
            mobile: browerEnv().android || browerEnv().ios, // 是否是移动端
        };
    },
    computed: {
        cp_ordinary () {
            let {
                symbols,
                keysText: { ordinary, defaultSymbol },
            } = this.boardData;
            let origin = ordinary[3];
            let lastArr = null;
            let defArr = this.boardModel === 'chinese' ? Object.entries(defaultSymbol).map(([k, itm]) =>
                Object.assign({}, itm, { text: k })
            ) : [
                {
                    text: ',',
                    type: 'symbol',
                },
                {
                    text: '.',
                    type: 'symbol',
                },
            ];
            let result;
            let sym = (symbols.length > 0 && symbols[0].items) || defArr;

            if (this.boardType === 'public') {
                if (sym.length > defArr.length || symbols.length > 1) {
                    lastArr = _implant(
                        [origin, defArr],
                        [
                            {
                                index: 0,
                                count: 2,
                            },
                            {
                                index: 1,
                                count: 1,
                            },
                            {
                                index: 0,
                                count: 1,
                            },
                            {
                                index: 1,
                                count: 1,
                            },
                            {
                                index: 0,
                                count: 2,
                            },
                        ],
                        defArr
                    );
                } else {
                    lastArr = [
                        origin[0],
                        ...sym.slice(0, 2),
                        origin[1],
                        ...sym.slice(2, 3),
                        ...origin.slice(2, 4),
                    ];
                }
            } else if (this.boardType === 'chinese') {
                if (sym.length > defArr.length || symbols.length > 1) {
                    lastArr = _implant(
                        [origin, sym],
                        [
                            {
                                index: 1,
                                count: 2,
                            },
                            {
                                index: 0,
                                count: origin.length,
                            },
                        ],
                        Object.entries(defaultSymbol).map(([k, itm]) =>
                            Object.assign({}, itm, { text: k })
                        )
                    );
                } else {
                    lastArr = [...sym.slice(0, 3), ...origin];
                }
            }
            result = [...ordinary.slice(0, 3), lastArr];
            return result;
        },
        cp_right () {
            return (
                this.boardData.keysText.large && {
                    width: '20%',
                }
            );
        },
        cp_left () {
            return (
                this.boardData.keysText.large && {
                    width: '80%',
                }
            );
        },
    },
    watch: {
        boardData () {
            this.isUpper = false;
        },
    },
    methods: {
        btnClick (e, data) {
            if (this.mobile) {
                let { type } = e || window.event;
                if (type.match(/mouse/g)) {
                    return false;
                }
            } else {
                let { type } = e || window.event;
                if (type.match(/touch/g)) {
                    return false;
                }
            }
            let { expect, type, text } = data;
            let isUpper = null;
            this.active = '';
            if (expect === 'caseSwitch') {
                this.isUpper = !this.isUpper;
            }
            ({ isUpper } = this);
            if (isUpper && type === 'default') {
                text = text.toUpperCase();
            }
            this.$emit(
                'btn-click',
                e,
                Object.assign({}, data, {
                    text,
                    isUpper: this.isUpper,
                })
            );
        },
        deleteClick ($event, btn, cls) {
            this.active = cls;
            this.time = new Date().getTime();
            this.pressDown($event, btn);
        },
        deleteEnd ($event) {
            this.active = '';
            $event.preventDefault();
            if (new Date().getTime() - this.time < 1000) {
                this.pressUp();
                this.$emit('btn-click', $event, {
                    text: '删除',
                    type: 'symbol delete',
                    expect: 'delete',
                });
            } else {
                this.$emit('clearT');
            }
            // if (new Date().getTime() - this.time < 41) {
            // }
        },
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.num-ul,
.sym-pad {
  height: 100%;
  width: 100%;
}

.spell {
  font-family: 'customFont', 'customFont1', 'customFont2', "Microsoft YaHei", "sans serif", "Tahoma", "Helvetica", "Arial", 'spe-symbol';
}
.k-btn-wrap {
  position: relative;
}

.sym-aside,
.k-btn-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
  background: #f5f7f8;
}

.k-btn-box {
  z-index: 0;
}

.switch {
  .sw-text:last-child {
    font-size: 50%;
    white-space: nowrap;
  }
}

.sw-item {
  align-items: baseline;
  display: flex;
}
</style>
